<template>
	<view class="px-2">
		<view class="flex align-center justify-between" >
			<!-- 左侧部分-->
			<view class="left flex align-center">
				<!-- 头像 -->
				<image :src="item.userpic" mode="" style="height: 65rpx; width: 65rpx;" lazy-load="true" @click="openSpace"></image>
				<!-- 昵称和时间 -->
				<view 
					class="flex flex-column justify-end"
					style="margin-left: 15rpx;"
				>
					<view class="font" style="line-height: 1.6;">{{item.userName}}</view>
					<text class="font-small text-light-muted"  style="line-height: 1.6;">{{item.newsTime}}</text>
				</view>
			</view>
			<!-- 右侧关注按钮 -->
			<view 
				class="right flex justify-center align-center bg-main text-white rounded animated faster"
				hover-class="jello"
				style="width: 90rpx; height: 50rpx;"
				v-if="!item.isFollow"
				@click="follow"
			>
				关注
			</view>
		</view>
		
		<!-- 标题 -->
		<view class="font my-1" @click="openDetail">{{item.title}}</view>
		<!-- 图片 -->
		<image 
			v-if="item.titlepic" 
			:src="item.titlepic" 
			class="w-100 rounded" 
			style="height: 350rpx;" 
			mode="" 
			lazy-load="true"  
			@click="openDetail"
		></image>
		<!-- 点赞 -->
		<view class="flex justify-between align-center py-1">
			<view 
				class="flex-1 flex justify-center align-center animated faster" 
				hover-class="jello" 
				:class="{'text-main': item.support.type=='up'}"
				@click="doChange('up')"
			>
				<text class="iconfont icon-dianzan2 mr-2"></text>
				<text>{{item.support.support_count}}</text>
			</view>
			<!-- 点踩 -->
			<view 
				class="flex-1 flex justify-center align-center animated faster" 
				hover-class="jello" 
				:class="{'text-main': item.support.type=='down'}"
				@click="doChange('down')"
			>
				<text class="iconfont icon-cai mr-2"></text>
				<text>{{item.support.unsupport_count}}</text>
			</view>
			<!-- 消息 -->
			<view 
				class="flex-1 flex justify-center align-center animated faster" 
				hover-class="jello" 
				@click="doInfo"
			>
				<text class="iconfont icon-pinglun2 mr-2"></text>
				<text>{{item.comment_count}}</text>
			</view>
			<!-- 分享 -->
			<view 
				class="flex-1 flex justify-center align-center animated faster" 
				hover-class="jello" 
				@click="doShare"
			>
				<text class="iconfont icon-fenxiang mr-2"></text>
				<text>{{item.share_num}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: Object,
			index: Number
		},
		methods:{
			// 进入个人空间
			openSpace(){
				
			},
			// 关注
			follow(){
				this.$emit('follow',this.index)
			},
			// 进入详情
			openDetail(){
				
			},
			// 点赞, 点踩
			doChange(type){
				this.$emit('doChange', {type, index:this.index})
			},
			// 评论
			doInfo(){
				
			},
			// 分享
			doShare(){
				
			}
		}
	}
</script>

<style>
</style>